<template>
  <div class="jdf-visualizer-refactored">
    <vue-flow
      v-model:nodes="processedNodes"
      v-model:edges="edges"
      :fit-view-on-init="true"
      :node-types="nodeTypes"
      class="basic-flow"
    >
      <template #node-jdfRefactored="nodeProps">
        <JDFNode_Refactored v-bind="nodeProps" />
      </template>
    </vue-flow>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted } from 'vue';
import { VueFlow, useVueFlow } from '@vue-flow/core';
import { useEditorStore } from '@/stores/editorStore';
import JDFNode_Refactored from './nodes/JDFNode_Refactored.vue';

const editorStore = useEditorStore();
const { fitView } = useVueFlow();

const nodeTypes = {
  jdfRefactored: JDFNode_Refactored,
};

const originalNodes = computed(() => editorStore.flowElements.nodes);
const edges = computed(() => editorStore.flowElements.edges);

const processedNodes = computed(() => {
  return originalNodes.value.map(node => ({
    ...node,
    type: 'jdfRefactored',
  }));
});

onMounted(() => {
  console.log('[JDFVisualizer_Refactored] Mounted. Nodes count:', processedNodes.value.length);
  setTimeout(() => {
    fitView();
  }, 100);
});
</script>

<style scoped>
.jdf-visualizer-refactored {
  border: 1px dashed blue;
  padding: 0;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
}

.basic-flow {
  height: 100%;
  width: 100%;
}
</style> 